 <template>
    <div style="background-color: white;width: 1000px;height: 1300px;">
<h1 style="color: black; font-size: 22px;margin-bottom: 30px;">工作台</h1>
<el-container>
   <!-- 头部 -->
     <el-header style="margin-bottom: 70px;">
       <!-- 顶部数据统计部分 -->
      <div class="inline-container">
       <h4>指标数据</h4>
     </div>
       <div class="indicator-list">
             
        <div class="indicator-item" v-for="(item, index) in indicators" :key="index">
       <el-row :gutter="4">
   <el-col :span="7"><el-avatar style="color: white;font-size: 25px;" :icon="item.icon" /></el-col>
   <el-col :span="17">
       <span style="font-size: 12px; color: gray;">{{ item.label}}</span>
       <p>{{ item.value}}</p>
   </el-col>
 </el-row>
           
           <!-- <el-icon size="25" style="color: gray;"><Coin /></el-icon> -->
       
     </div>
   

       </div>
   </el-header>
  <!-- 图表显示 -->
     <el-main>  
        <div class="inline-container">
       <el-button link style="margin-right: 40px;color: #000;" @click="open1()"><h4 :style="{ color: activeIndex == 1 ? '#409EFF' : '#000' }">销售统计</h4></el-button>
       <el-button link style="margin-right: 40px;color: #000;" @click="open2()"><h4 :style="{ color: activeIndex==2 ? '#409EFF':'#000'}">采购统计</h4></el-button>
    </div>
       <!-- 统计图表部分 -->
    <div class="chart-section"  v-show="Isopen1">
     <VueEcharts
       style="width: 950px; height: 400px;"
       :option="option1"
     >
   </VueEcharts>
</div>
  <div class="chart-section"  v-show="Isopen2">
     <VueEcharts
       style="width: 950px; height: 400px;"
       :option="option2"
     >
   </VueEcharts>
</div>
</el-main>
     <el-footer>

       <!-- 待审批单据和通知公告部分 -->
       <el-row>
   <el-col :span="12">
     <!-- 待审批单据部分 -->
   <div class="inline-container">
       <h4>待审批单据</h4>
   </div>
   <div class="document-list">
     <div class="document-item" v-for="(item, index) in approvalData" :key="index">
       <p class="number" :style="{ color: item.number > 0? 'crimson' : 'gray' }">{{ item.number }}</p>
       <span>{{ item.name }}</span>
     </div>
   </div>

   </el-col>
   <el-col :span="12">
    <!-- 通知公告部分 -->
   <div class="notice-section">
      <div class="inline-container">
       <h4>通知公告</h4>
   </div>
     <el-table :data="notices" style="width: 100%">
       <el-table-column prop="content" label="公告内容"></el-table-column>
       <el-table-column prop="time" label="接收时间"></el-table-column>
     </el-table>
   </div>
   </el-col>
 </el-row>
      <div style="margin-bottom: 30px;">
   <el-button link style="margin-right: 40px;color: #000;" @click="getOrder()"><h4 :style="{ color: activeIndex1 == 1 ? '#409EFF':'#000' }">工艺流程</h4></el-button>
   <el-button link style="margin-right: 40px;color: #000;" @click="GetTicket()"><h4 :style="{ color: activeIndex1==2 ? '#409EFF':'#000'}">工单管理</h4></el-button>
   <el-button link style="margin-right: 40px;color: #000;" @click="GetProcess()"><h4 :style="{ color: activeIndex1==3 ? '#409EFF':'#000'}">销售订单</h4></el-button>
   <el-button link style="margin-right: 40px;color: #000;" @click="getProduct()"><h4 :style="{ color: activeIndex1==4 ? '#409EFF':'#000'}">工序管理</h4></el-button>
 </div>
   <!-- 部分 -->
    <!-- 订单列表 -->
     <el-table v-show="a" :data="tableData" highlight-current-row border style="width: 100%">
       <!-- <el-table-column type="selection" width="40" /> -->
       <el-table-column type="index"  width="40" />
       <el-table-column prop="processNo" label="工序编号" width="200" />
              <el-table-column prop="processName" label="工序名称" width="150" />
              <el-table-column prop="processName" label="工艺路线名称" width="120" />
      <el-table-column prop="processdescris" label="工艺路线说明" />
      <el-table-column prop="isvailable" label="是否启用">
        <template #default="scope">
          <div style="color: #409eff; font-weight: bold; font-size: 14px">
            {{ scope.row.isvailable == 1 ? "是" : "否" }}
          </div>
        </template>
      </el-table-column>
     </el-table>
<!-- 工单列表 -->
       <el-table
           :data="workOrderList"
           highlight-current-row
           style="width: 100%"
           stripe
           border
           v-show="b"
       >
         <el-table-column type="selection" width="40" />
           <el-table-column prop="workOrderCoding" label="工单编号"></el-table-column>
         <el-table-column prop="workOrderName" label="产品名称"></el-table-column>
         <el-table-column prop="workOrderType" label="状态"></el-table-column>
           <el-table-column prop="workorderSource" label="计划开始时间"></el-table-column>
           <el-table-column prop="orderNumber" label="订单编号"></el-table-column>
           <el-table-column prop="productNumber" label="产品编号"></el-table-column>
           <el-table-column prop="specifications" label="规格型号"></el-table-column>
           <el-table-column prop="supplierCode" label="供应商编码"></el-table-column>
           <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
           <el-table-column prop="note" label="备注"></el-table-column>
       </el-table>
       <!-- 销售订单 -->
<el-table v-show="c" :data="datatable" highlight-current-row border style="width: 100%">
               <el-table-column type="selection" width="40" />
               <el-table-column prop="salesNumber" label="销售单号" width="200" />
               <el-table-column prop="salesName" label="销售订单主题" width="150" />
               <el-table-column prop="customername" label="客户名称" width="120" />
               <el-table-column prop="salesTime" label="销售日期" width="120" />
               <el-table-column prop="salemoney" label="总金额" width="180" />
               <el-table-column prop="invoicedamount" label="已开票金额" width="180" />
               <el-table-column prop="invoiceamount" label="开票金额" width="120" />
               <el-table-column prop="updateTime" label="修改时间" width="180" />
               <el-table-column prop="updateUserId" label="修改人" width="120" />
           </el-table>
           <!-- 工序管理 -->
      <el-table v-show="d" :data="tableDatap" highlight-current-row border >
       <el-table-column type="index" width="40" />
       <el-table-column prop="processCode" label="工序编码" width="300" />
       <el-table-column prop="processName" label="工序名称" width="200" />
       <el-table-column prop="isEnabled" label="是否启用" width="200" />
       <el-table-column prop="remarks" label="备注" width="300" />
       
       </el-table>
</el-footer>
   </el-container>
 </div>
</template>
<script setup lang="ts">
import { ref,onMounted,reactive } from 'vue';
import 'echarts'
import VueEcharts from "vue-echarts";
import axios from 'axios'
import { ElIcon } from 'element-plus';
const activeIndex = ref(-1);
const activeIndex1 = ref(-1);
const form = reactive({
  totalCount: 0,
  totalPage: 0,
 size: 15,
 index: 1,
 OrderNo: '',
 OrderId: 0
});
const option1: any = ref({});
const option2: any = ref({});
const Isopen1 = ref(false);
const Isopen2 = ref(false);
//销售订单图表
const open1 = () => {
   activeIndex.value = 1;
   Isopen1.value = true;
Isopen2.value = false;
}
//采购订单图表
const open2 = () => {
activeIndex.value = 2;
Isopen1.value = false;
Isopen2.value = true;
}
// 模拟指标数据
const indicators = ref([
 {
   icon: 'Coin',
   label: '今日销售收入(元)',
   value: '5000.00'
 },
 {
   icon: 'DataLine',
   label: '今日销售单量(笔)',
   value: '100'
 },
 {
   icon: 'Odometer',
   label: '今日资金回款(元)',
   value: '5000.00'
 },
 {
   icon: 'Loading',
   label: '今日采购支出(元)',
   value: '5000.00'
 },
   {
   icon: 'Notification',
   label: '今日采购订单(笔)',
   value: '5000.00'
 },
   {
   icon: 'Money',
   label: '今日已付款项(元)',
   value: '5000.00'
 }
]);
// 模拟待审批单据数据
const approvalData = [
 { name: '采购订单', number: 0 },
 { name: '销售订单', number: 5 },
 { name: '入库单', number: 0 },
 { name: '出库单', number: 3 },
 { name: '到票单', number: 2 },
 { name: '支出单', number: 1 },
 { name: '开票单', number: 6 },
 { name: '请购单', number: 0 }
];

const currentDate = ref('');
const currentDay = ref('');
// 模拟销售图表数据
const list = () => {

     //销售订单
       option1.value = {
       legend: {
       orient: 'vertical',
       top: '5%',
       },
       tooltip: {
         trigger: "axis",
         axisPointer: {
         type: "shadow",
         },
       },
       grid: {
         left: "3%",
         right: "4%",
         bottom: "3%",
         containLabel: true,
       },
       xAxis: [
         {
           type: "category",
           data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
           axisTick: {
           alignWithLabel: true,
           },
         },
       ],
       yAxis: [
         {
               type: "value",
           name: '订单额(元)',
     min: 0,
     max: 600,
     interval: 100
           },
         
   {
     type: 'value',
     name: '订单数(笔)',
     min: 0,
     max: 60,
     interval: 10
   }
       ],
       series: [
         {
            name: '订单额',
            type: 'bar',
            yAxisIndex: 0,
            data: [50, 400, 200, 250, 300, 500, 350, 400, 150, 550, 500, 450]
         },
         {
           name: '订单数',
           type: 'line',
           yAxisIndex: 1,
           data: [15, 12, 20, 55, 40, 10, 50, 40, 25, 15, 50, 20]
         }
       ],
       };
    //采购订单
       option2.value = {
       tooltip: {
         trigger: "axis",
         axisPointer: {
         type: "shadow",
         },
       },
       grid: {
         left: "3%",
         right: "4%",
         bottom: "3%",
         containLabel: true
           },
           
       legend: {
         orient: 'vertical',
         top: '5%',
           },
       xAxis: [
         {
           type: "category",
           data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
           axisTick: {
             alignWithLabel: true,
           },
         },
       ],
       yAxis: [
         {
           type: "value",
           name: '单位(元)',
           min: 0,
           max: 600,
           interval: 100
           },
         
         {
           type: 'value',
           name: '单位(笔)',
           min: 0,
           max: 60,
           interval: 10
            }
           ],
       series: [
           {
           color:"#00ffff",
            name: '订单额',
            type: 'bar',
            yAxisIndex: 0,
            data: [50, 400, 200, 250, 300, 500, 350, 400, 150, 550, 500, 450]
         },
           {
       color:"#d4a2eb",
     name: '订单数',
     type: 'line',
     yAxisIndex: 1,
     data: [15, 12, 20, 55, 40, 10, 50, 40, 25, 15, 50, 20]
   }
       ],
     };
     
  
};

// 模拟通知公告数据
const notices = ref([
 {
   content: '春节放假通知',
   time: '2025-04-14 08:11:57'
 },
 {
   content: '五一放假通知',
   time: '2025-04-14 08:11:57'
 },
 {
   content: '端午节放假通知',
   time: '2025-04-14 08:11:57'
 },
 {
   content: '国庆节放假通知',
   time: '2025-04-14 08:11:57'
 }
]);
const apiUrl = import.meta.env.VITE_APP_API_URL;

// 订单列表显示
const tableData = ref([]);
const a=ref(false)
const b = ref(false)
const c = ref(false)
const d=ref(false)
const gongyi=reactive({
pageIndex:1,
pageSize:10,
   totalCount: 0,
  totalPage: 0,
})
const getOrder = () => {
   activeIndex1.value = 1;
   a.value = true;
   b.value = false;
   c.value = false;
   d.value = false;
 axios.get(apiUrl+"/T5/Process/GetProcess", {
   params: gongyi
 }).then((res) => {
   tableData.value = res.data.data;
   form.totalCount = res.data.totalCount;
   form.totalPage = res.data.totalPage;
 })
 .catch((err) => {
   console.log(err);
 });
};

// 工单列表显示
const Ticketshuju=reactive({
   index:1,
   size:10,
   totalCount: 0,
  totalPage: 0,
})
const workOrderList=ref([])
const GetTicket = () => {
   activeIndex1.value = 2;
   b.value = true;
   a.value = false;
   c.value = false;
     d.value = false;
   axios({
       url: apiUrl+"/T5/WorkOrder/GetWorkOrder",
       method: 'get',
       params: Ticketshuju
   })
 .then(res=>{
   
           workOrderList.value=res.data.data
           Ticketshuju.totalCount = res.data.totalCount;
           Ticketshuju.totalPage = res.data.totalPage;
      
   })
}

// 工序

const datatable = ref([])
const GetProcess = () => {
   activeIndex1.value = 3;
   c.value = true;
   b.value = false;
   a.value = false;
     d.value = false;
   axios.get(apiUrl+"/T5/ProductInfo/GetSalesordersheet", {
    
   }).then(res => {
       console.log(res)
       datatable.value = res.data.data;
      
   })
}
// 物品列表显示
const formp = reactive({
 totalCount: 0,
 totalPage: 0,
size: 15,
 index: 1,
 productNo: ''
});
const tableDatap =ref([]);
const getProduct = () => {
   activeIndex1.value = 4;
   d.value = true;
   a.value = false;
   b.value = false;
   c.value = false;
   axios({
   url:apiUrl+"/T5/Setting/ProcessingoShow",
   method: 'get',
   params: formp
 }).then((res) => {
   tableDatap.value = res.data.data;
   console.log(tableData.value);
   form.totalCount = res.data.totalCount;
   form.totalPage = res.data.totalPage;
 })
}

onMounted(() => {
   list();
   open1()
    getOrder()
   

});
</script>

<style scoped>
.inline-container {
 display: flex;
 align-items: center;
 margin-bottom: 20px;
}
.indicator-list {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;

}
.indicator-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 150px;
 margin-bottom: 10px;
}
.dashboard-container {
 padding: 10px;
}

.top-stats {
 display: flex;
 justify-content: space-between;
 margin-bottom: 30px;
}

.stat-item {
 display:flex;
 flex-direction:column;
 align-items:center;
 width:150px;
}

.chart-section {
 margin-bottom: 20px;
}


.approval-section {
   margin-bottom: 20px;
   /* 新增：使用flex布局，让子元素在一行显示 */
   display: flex;
   flex-wrap: wrap; 
}
.approval-item {
   /* 修改：去除固定宽度，让其根据内容自适应 */
   margin-right: 20px; /* 新增：添加元素间的间距 */
   margin-bottom: 10px; 
}

.notice-section {
 margin-bottom: 20px;
}



.document-list {
 display: flex;
 flex-wrap: wrap;
 justify-content: space - around;
}

.document-item {
 width: 120px;
 text-align: center;
 margin-bottom: 20px;
}
.number {
 font-size: 24px;
 margin-bottom: 5px;
}
</style> 